<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/view/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>房源销售情况</title>
<link href="${project}/ds/css/input.css" rel="stylesheet" />
<link rel="stylesheet" href="${project}/ds/css/space.css" />
<link href="${project}/ds/css/buttons.css" rel="stylesheet" />
<link href="${project}/ds/lib/ligerUI/skins/Aqua/css/ligerui-all.css"
	rel="stylesheet" />
<link href="${project}/ds/css/ToolTip.css" rel="stylesheet" />
<link href="${project}/ds/lib/font-awesome-4.7.0/css/font-awesome.css"
	rel="stylesheet" />
<link href="${project}/ds/css/roomStyle.css" rel="stylesheet" />
<link href="${project}/ds/lib/layui/css/layui.css" rel="stylesheet" />

<script src="${assets}/application/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="${project}/ds/lib/ligerUI/js/core/base.js"
	type="text/javascript"></script>
<script src="${project}/ds/lib/ligerUI/js/ligerui.min.js"
	type="text/javascript"></script>
<script src="${project}/ds/lib/jquery.form.js" type="text/javascript"></script>
<script src="${project}/ds/js/XHD.js" type="text/javascript"></script>
<script src="${project}/ds/js/room/room1.0.js" type="text/javascript"></script>
<script src="${project}/ds/js/base64.js" type="text/javascript"></script>
<script src="${project}/ds/lib/layui/layui.js" type="text/javascript"></script>
  <script src="${project}/ds/js/room/deal.js" type="text/javascript"></script>
<script src="${project}/ds/js/public.js" type="text/javascript"></script>
<%--  <script src="${project}/ds/js/js/ws.js" type="text/javascript"></script> --%>
<script src="${project}/ds/js/layeralert.js" type="text/javascript"></script>
<%--  <script src="${project}/ds/js/room/command.js" type="text/javascript"></script> --%>
<script src="${project}/ds/js/jquery.countdown.js" type="text/javascript"></script>
<style>
    form{height:auto; width:auto;}
</style>
<script type="text/javascript">
	//var roomData;
	//var order = "-";
	//var houseid = window.top.currentHousesid;
	//var housesName = window.top.currentHousesName;
	//var user = "";
	//var username = window.top.getusername();
	
	var layerindex = undefined;
	var layer;
	var ismonitor = true;
	var MonitorType = 2;
	var tipindex = 0;
	var BusType = 1;
	layui.use([ 'upload', 'layer' ], function() {
		var option = {
			elem : "#backorderlist",
			title : "上传列表",
			url : "/roomMonitor/UploadRoomBakcOrder",
			method : "post",
			type : "file",
			before : function() {
				layerindex = layload('请等待预留数据上传');
			},
			success : function(data) {
				var result = data.result;
				if (result === "true") {
					var json = data.json;
					RoomGuideAjaxAll(json);
					
				} else {
					layererr(data.msg);
				}
			}
		};
		layui.upload(option);
		layer = layui.layer;
		// websocketConnect();
	});
	
	$.ajaxSetup({
		 error : function(xhr,textStatus,errorThrown){
		       　　if (xhr.status == 401) {
		       　　　　 layer.msg("项目未启动，请谨慎操作!");
		         　   } 
		  }
		});
	function RoomGuideAjaxAll(json){
		 $.ajax({
	            url: "/roomMonitor/RoomGuideAjaxAll",
	            type: "post",
	            async: false,
	            data: {json:JSON.stringify(json)},	            
	            success: function(data) {
	            	if(data.result==="true"){
		            	window.close(layerindex);
						layermsg("预定上传结束");	            		
	            	}else{
	            		window.close(layerindex);
						layermsg("预定上传失败");	 
	            	}
	            }
	        });
	}
	$(function() {
		//$("#allroomdiv").load("/roomMonitor/loudongData");
		 $.ajax({
		    url:"/roomMonitor/loudongData",
		    type:"GET",
		    dataType:"html",
		    success:function(result){		    	
		    	$("#allroomdiv").html(result); 
		    },
		    beforeSend:function(){
		    	
		    }
		}); 

		 $("#dtel").blur(function() {
		     var obj = $(this);
		     GetClient(obj.val());
		 }); 
		 timer = setInterval("checkRoomState()", 2000);
	});
	
	 	
	    function checkRoomState() {
	    	  $.ajax({
	              url: "/roomMonitor/checkRoomState",
	              type: "post",
	              async: true,
	              dataType: "json",
	              success: function(data) {
	                  var json=data.msg;
	                  json.forEach((t, i) => {
	                	 var monitor = $("#"+t.D_ID).attr("monitor");
	                	 var dState = $("#"+t.D_ID).attr("dState");
	                	 $("#"+t.D_ID).removeClass("monitor"+monitor);
	                	 $("#"+t.D_ID).removeClass("dState"+dState);
                          if(t.D_Monitor =='0' && t.D_state=='0'){
                        	  $("#"+t.D_ID).addClass("monitor0");
                          }else if(t.D_Monitor=='1'){
                        	  $("#"+t.D_ID).addClass("monitor1");
                          }else if(t.D_Monitor=='2'){
                        	  $("#"+t.D_ID).addClass("monitor2");
                          }else if(t.D_Monitor=='3'){
                        	  $("#"+t.D_ID).addClass("monitor3");
                          }else if(t.D_state=='1'){
                        	  $("#"+t.D_ID).addClass("dState1");
                          }else if(t.D_state=='2'){
                        	  $("#"+t.D_ID).addClass("dState2");
                          }
                          $("#"+t.D_ID).attr("monitor",t.D_Monitor);
                          $("#"+t.D_ID).attr("dState",t.D_state);
                     });
	              }
	          });	       
     }
	//websocket连接成功后事件
	/*   function wsonload() {
	      var json = wsorder.getroomlist(user);
	      websocket.send(JSON.stringify(json));
	      setTimeout(function () {
	          setInterval(function () {
	              var json = wsorder.getroomstate(user);
	              websocket.send(JSON.stringify(json));
	          }, 800);
	      }, 1000);
	  } */

	/* function toolbar() {
		var items = [];
		$("#toolbar").ligerToolBar({
			items : items
		});
	} */
	function checkTel(tel){
		if (tel.length === 0){
			return true;//空不做限制
		}
		
		 var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
         if (!myreg.test(tel)) {
             return false;
         } else {
             return true;
         }
	}
	//根据手机号码查询认筹用户情况
	function GetClient(tel) {
		/* if (tel.length !== 11) {
			layer.alert("请输入11位手机号码！");
			$("#dclientid").val("0");
			$("#dname").val("");
			$("#dcardno").val("");
			msg = "输入手机号码来快速加载认筹客户";
			$("#msg").html(msg);
			return;
		} */
		if(!checkTel(tel)){
			layer.alert("请输入有效的11位手机号码！");
			$("#dclientid").val("0");
			$("#dname").val("");
			$("#dcardno").val("");
			msg = "输入手机号码来快速加载认筹客户";
			$("#msg").html(msg);
			return;
		}
		$.ajax({
			url : "/roomMonitor/formByTel",
			type : "post",
			dataType : "json",
			data : {
				tel : tel
			},
			success : function(data) {
				var result = data.result;
				var msg = data.msg;
				var showmsg;
				if (result === "true") {
					$("#dclientid").val(msg.dclientid);
					$("#dname").val(msg.name);
					$("#dcardno").val(msg.dcardno);
					showmsg = "当前客户为已认筹客户";
				} else {
					$("#dclientid").val("0");
					$("#dname").val("");
					$("#dcardno").val("");
					showmsg = "请注意，当前客户不属于认筹客户！";
				}
				$("#msg").html(showmsg);
			}
		});
	}
	
	//房间预定
	function setroomorder() {
		var id = $("#roomid").val();
		console.log('id='+id);
		if (id == null || id ==="") {
			layer.msg("请选择房间");
			return;
		}

		$("#dname").val("");
		$("#dtel").val("");
		$("#dcardno").val("");
		msg = "输入手机号码来快速加载认筹客户";
		$("#msg").html(msg);
		//var room = getroom(id);
		if (room.D_Monitor != 0 || room.D_state != 0) {			
			window.layererr("当前房源已预定，无需再预定");
			return;
		}
		layer.open({
			title : "预定确认：",
			type : 1,
			btn : [ '确定', '取消' ],
			area : "560px",
			btnAlign : "c",
			shadeClose : false,
			closeBtn : 0,
			yes : function(index) {
				if(!checkTel($("#dtel").val())){
					$("#msg").html("手机号码无效!禁止提交!");
					return;
				}
				$("#op").val("setroomorder");
				var clientid = $("#dclientid").val() === "" ? 0 : parseInt($("#dclientid").val());
				RoomGuideAjax("setroomorder", $("#dname").val(), $("#dtel").val(), $("#dcardno").val(), id);
				$("#dname").val("");
				$("#dtel").val("");
				$("#dcardno").val("");
				$("#msg").val("输入手机号码来快速加载认筹客户");
				layer.close(index);
			},
			content : $("#divinfo")
		});
	}
	
	function RoomGuideAjax(action, name, tel, cardno,id){
		 console.log(action);
		 $.ajax({
	            url: "/roomMonitor/RoomGuideAjax",
	            type: "post",
	            async: false,
	            data: { action: action, name: name,tel:tel,cardno:cardno,roomid:id },
	            dataType: "json",
	            success: function(data) {
	                if(data.result==="true"){
	                	 if("setroomorder"===action){
	                		$("#"+id).addClass("monitor1");
	                	}else if("roomunorder"==action){
	                		$("#"+id).removeClass("monitor1");
	                	}else if("setroomunred"==action){
	                		$("#"+id).removeClass("monitor3");
	                	}
	                	$("#roomid").val("");
	                	layer.msg(data.msg);
	                }else{
	                	layer.msg(data.msg);
	                }
	            }
	        });
	}
	//房间预定撤销
	function roomunorder() {
		var id = $("#roomid").val();
		if (id == null || id ==="") {
			layer.msg("请选择房间");
			return;
		}
		if (room.D_Monitor === "0") {
			window.layererr("当前房源未预定");
			return;
		}
		if (room.D_Monitor === "2") {
			window.layererr("当前房源正在翻红中");
			return;
		}
		if (room.D_Monitor === "3") {
			window.layererr("当前房源已售出");
			return;
		}
		layer.open({
			title : "确定撤销当前房间预约状态？",
			type : 1,
			btn : [ '确定', '取消' ],
			btnAlign : "c",
			shadeClose : false,
			closeBtn : 0,
			yes : function(index) {
				$("#op").val("roomunorder");
				RoomGuideAjax("roomunorder", $("#dname").val(), $("#dtel").val(), $("#dcardno").val(), id);
				layer.close(index);
			},
			btn2 : function(index) {
				layer.close(index);
			}
		});
	}

	//房间预定翻红退订
	function setroomunred() {
		var id = $("#roomid").val();
		if (id == null || id ==="") {
			layer.msg("请选择房间");
			return;
		}
		if (room.D_Monitor != "3") {
			window.layererr("当前房源未售出");
			$("#roomid").val("");
			return;
		}

		layer.open({
			title : "确定退订当前房间？",
			type : 1,
			btn : [ '确定', '取消' ],
			btnAlign : "c",
			shadeClose : false,
			closeBtn : 0,
			yes : function(index) {
				$("#op").val("setroomunred");
				RoomGuideAjax("setroomunred", $("#dname").val(), $("#dtel").val(), $("#dcardno").val(), id);
				layer.close(index);
			},
			btn2 : function(index) {
				layer.close(index);
			}
		});
	}

	//房间预定开始翻红
	function backorderstart() {
		layer.open({
			title : "确定要开始翻红吗？请谨慎确认",
			type : 1,
			btn : [ '确定', '取消' ],
			btnAlign : "c",
			shadeClose : false,
			closeBtn : 0,
			yes : function(index) {
				moreFanHong();
				layer.close(index);
			},
			btn2 : function(index) {
				layer.close(index);
			}
		});
	}
	//房间预定一键还原
	function resetorderstart() {

		layer.open({
			title : "确定要开始还原吗？请谨慎确认",
			type : 1,
			btn : [ '确定', '取消' ],
			btnAlign : "c",
			shadeClose : false,
			closeBtn : 0,
			yes : function(index) {
				resetorderstart();
				layer.close(index);
			},
			btn2 : function(index) {
				layer.close(index);
			}
		});
	}
	
	//全部翻红
	function moreFanHong(){
		 $.ajax({
	            url: "/roomMonitor/moreFanHong",
	            type: "post",
	            async: true, 
	            dataType: "json",
	            success: function(data) {
	            	$("#roomid").val("");
	            	if(data.result==="true"){
	            		changeColorFanHong(data.msg);
	                	layer.msg("操作成功!");
	            	}
	            }
	        });
	}
	function changeColorFanHong(json){
		 json.forEach((t, i) => {
        	  $("#"+t.D_ID).removeClass("monitor1");
              $("#"+t.D_ID).addClass("monitor2");             
              $("#"+t.D_ID).attr("mstate","2");
         });
	}
	
	function changeColorReset(){
		   $(".roomDiv").each(function(){
				  $(this).removeClass("monitor3");
				  $(this).addClass("monitor0");    
	    	});
	}
	//全部还原
	function resetorderstart(){
		 $.ajax({
	            url: "/roomMonitor/moreReset",
	            type: "post",
	            async: true, 
	            dataType: "json",
	            success: function(data) {
	            	$("#roomid").val("");
	            	if(data.result==="true"){
	            		changeColorReset();
	                	layer.msg("还原成功");
	            	}
	            }
	        });
	}
	function setOp(val,id) {
		var title = "";
		var type = "";
		//后台预定翻红
		if (val === 1) {
			title = "确定将当前房间跳过倒计时？";
			type = "setroomred";
		}
		if (val === 2) {
			title = "确定将当前房间变为已售出状态？";
			type = "setroomredtrim";
		}
		layer.open({
			title : title,
			type : 1,
			btn : [ '确定', '取消' ],
			btnAlign : "c",
			shadeClose : false,
			closeBtn : 0,
			yes : function(index) {
				//window.RoomGuideAjax(type, username, user, $("#roomid").val());
				singleFanHong(id);
				layer.close(index);
			},
			btn2 : function(index) {
				layer.close(index);
			}
		});
	}
	function singleFanHong(id){
		console.log("泛红="+id);
		 $.ajax({
	            url: "/roomMonitor/singleFanHong",
	            type: "post",
	            async: true,
	            data: { id: id},  
	            dataType: "json",
	            success: function(data) {
	            	if(data.result==="true"){
	                	layer.msg("操作成功");
	            		$("#"+data.msg).removeClass("monitor1");
	            		$("#"+data.msg).addClass("monitor2");
	            		$("#roomid").val("");//清空一下被选中房间
	            	}
	            }
	        });
	}
	
	//房源双击
 	var TimeFn = null;
 	/*$(document).on("dblclick", ".roomDiv", function() {
		clearTimeout(TimeFn);
		var monitor = $(this).attr("monitor");
	    //后台预定跟预定
	    if (monitor === "0") {
	    	window.layererr("当前房源未预定");
	    }else if(monitor === "2"){
	    	window.layererr("当前房源正在翻红中");
	    }else if(monitor === "3"){
	    	window.layererr("当前房源已售出");
	    }else{
				setOp(2,$(this).attr("id"));	       
	    }	   
	}); */
	
	//房源单击事件
	var roomid;
	$(document).on("click", ".roomDiv", function(e) {
		 clearTimeout(TimeFn);
		 	roomid = $(this).attr("id");
		    	console.log(roomid);
				$("#roomid").val(roomid);
				$(this).addClass("roomChecked");
				$(".roomDiv").not(this).removeClass("roomChecked");
				//$(".roomDiv").removeClass("roomChecked");
		 //执行延时
		    TimeFn = setTimeout(function(){
				getMessage(roomid);
				
		    },300);
		
	});
	var room ;//全局房间信息
	function getMessage(id) {
		$.ajax({
			url : "/collectionMonitor/getRoomMsg",
			type : "post",
			async:false,
			data : {
				id : id
			},
			dataType : "json",
			success : function(data) {
				room = data;
				console.log(data);
				ShowMessage(data)
			}
		});
	}
	function getroom(id){
		$.ajax({
			url : "/collectionMonitor/getRoomMsg",
			type : "post",
			data : {
				id : id
			},
			dataType : "json",
			success : function(data) {
				room = data;
				console.log(room.D_Monitor);
			}
		});
	}
	function ShowMessage(data) {
		var room = data;
		$(".dbanname").html(room.D_BanName);
		$(".dunit").html(room.D_Unit);
		$(".dunitname").html(room.d_position);
		$(".droomno").html(room.D_RoomNo);
		$(".droomcard").html(room.D_RoomCard);
		$(".dfloorarea").html(room.D_FloorArea);
		$(".dinnerarea").html(room.D_InnerArea);
		$(".dassessmentarea").html(room.D_AssessmentArea);
		$(".dhousemodel").html(room.D_HouseModel);
		$(".droomtype").html(room.D_RoomType);
		$(".dprice").html(room.D_Price);
		$(".dtotle").html(room.D_Total);
		$(".ddiscountprice").html(room.D_discountPrice);
		$(".ddiscounttotle").html(room.D_discountTotal);
		$(".dname").html(room.D_Name);
		$(".dcardno").html(room.D_Card);
		$(".dtel").html(room.D_Tel);
	}
	function TryToUpload() {
		$("#backorderlist").click();
	}

	//下载房间后台预留模版
	function LoadModel() {
		var form = $("<form>"); //定义一个form表单
		form.attr("style", "display:none");
		form.attr("target", "");
		form.attr("method", "post");
		form.attr("action", "../data/Room.ashx");

		var input1 = $("<input>");
		input1.attr("type", "hidden");
		input1.attr("name", "Action");
		input1.attr("value", "loadFile");

		var input2 = $("<input>");
		input2.attr("type", "hidden");
		input2.attr("name", "type");
		input2.attr("value", "backorder");

		$("body").append(form); //将表单放置在web中
		form.append(input1);
		form.append(input2);
		form.submit(); //表单提交
	}
</script>
<style type="text/css">
.message table tr {
	height: auto;
}

.message table tr div, .message table tr span {
	font-size: 14px;
}

.buttondiv {
	font-size: 8px;
	height: 40px;
	padding: 0 10px;
	width: 80px;
}

.layui-layer-btn1 {
	border-color: #F1F1F1 !important;
	background-color: #F1F1F1 !important;
	color: #333333 !important;
}

#divinfo {
	width: 560px;
}

#divinfo table {
	border: none;
}

#divinfo th {
	text-align: right;
	border: none;
	background-color: white;
	padding: 5px 0 5px 0;
}

#divinfo td {
	text-align: left;
	border: none;
	background-color: white;
	padding: 5px 10px 5px 0;
}

#divinfo input {
	width: 100%;
	height: 100%;
	font-size: 12px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-color: black;
}
</style>
</head>
<body>
	<form id="infoform">
		<input type="hidden" id="roomid" name="roomid" /> 
		<input type="hidden" id="op" /> 
		<input type="hidden" name="username" id="username" />
		<input type="hidden" id="banid" name="banid" />
			<div style="height: 100%; overflow: auto; text-align: center; width: 100%;">
				<div id="allroomdiv" style="position: fixed; top: 0; left: 0; right: 240px; bottom: 0; overflow: auto;">

				
				
					
				</div>
			</div>
			<div class="message"
				style="position: fixed; top: 0; width: 240px; right: 0; bottom: 0;">
				<table bordercolor="black" style="width: 100%;">
					<tr>
						<th>
							<div align="right">楼栋：</div>
						</th>
						<td><span class="dbanname roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">单元：</div>
						</th>
						<td><span class="dunit roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">室号：</div>
						</th>
						<td><span class="droomno roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">面积：</div>
						</th>
						<td><span class="dfloorarea roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">户型：</div>
						</th>
						<td><span class="dhousemodel roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">类型：</div>
						</th>
						<td><span class="droomtype roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">单价：</div>
						</th>
						<td><span class="dprice roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">总价：</div>
						</th>
						<td><span class="dtotle roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">姓名：</div>
						</th>
						<td><span class="dname roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">手机：</div>
						</th>
						<td><span class="dtel roomSpan"></span></td>
					</tr>
					<tr>
						<th>
							<div align="right">身份证：</div>
						</th>
						<td><span class="dcardno roomSpan"></span></td>
					</tr>
				</table>				
			</div>
	
		<div class="cover_bg" style="top: 30px;"></div>
		<div id="right" style="display: none;"></div>

	</form>	
</body>
</html>